<template>

  <!-- 个人中心页面 -->
  <div class="indexConainer">
    <!-- 遮罩层 -->
    <van-overlay :show="!isNav" />

    <!-- header区域 -->
    <div class="header">
      <!-- 创建一个空标签占位 -->
      <div class="empty"></div>
      <!-- 头部搜索区域 -->
      <div class="top-search-wrap">
        <!-- logo -->
        <div class="logo">
          <img src="./images/logo.png" alt="">
        </div>
        <!-- 搜索按钮 -->
        <router-link to="/search" class="search-btn-wrap">
          <div class="search-btn">
            <van-icon name="search" />
            &nbsp;
            <span>搜索商品,共110648款好物</span>
          </div>
        </router-link>
        <!-- 登录的按钮 如果是未登录就是显示状态-->
        <router-link to="/login" v-if="!user">
          <div class="login-btn">登录</div>
        </router-link>
      </div>
      
      <!-- 切换标签 -->
      <div class="toggle-wrap" @click="toggleNav" >
        <div class="linear"></div>
        <!-- 这个图标应该进行定位, 其他内容来显示 -->
        <div class="icon" >
          <van-icon ref="icon" name="arrow-down" />
        </div>
        
      </div>
      <!-- 内容区域, 用于切换 -->
      <div class="content-wrap" ref="content">
        <!-- title 区域 -->
        <div class="title">全部频道</div>
        <!-- tag 选项区域 -->
        <div class="tag-wrap">
          <van-tag :color="active === -1 ? '#dd1a21': '#ccc'  " :text-color="active === -1 ? '#dd1a21': '#333'" @click="changeactive(-1)"  plain >推荐</van-tag>
          <!-- 绑定点击事件 -->
          <van-tag :color="active === cate.id ? '#dd1a21': '#ccc' " :text-color="active === cate.id ? '#dd1a21': '#333' " @click="changeactive(cate.id)" v-for="(cate,index) in categoryL1List" :key="index" plain>{{ cate.name }}</van-tag>
        </div>
        <!-- 灰色块儿 -->
        <div class="mark"></div>
      </div>
      <!-- 导航条区域 -->
      <div class="nav-warp">
        <!-- 滑块儿 -->
        <van-tabs animated line-width="1.7rem" sticky v-model="active" title-active-color="#dd1a21">
          <van-tab :name="-1" title="推荐">
            <!-- 这里写一个推荐组件 -->
            <indexRecommend></indexRecommend>
          </van-tab>
          <!-- 导航区域 -->
          <van-tab :name="cate.id" :title="cate.name" v-for="cate in categoryL1List" :key="cate.id">
              <van-skeleton :loading="isLoadingCategoryInfo" :row="18" />
              <!-- 这里进行数据渲染 -->
              <div v-if="cate.id === active">
                <!-- 放值一个轮播图 -->
                <van-swipe class="category-swipe" :autoplay="3000" indicator-color="white">
                  <van-swipe-item v-for="(banner,index) in cateGoryBannerList" :key="index">
                    <van-image fit="contain" :src="banner.picUrl"></van-image>
                  </van-swipe-item>
                </van-swipe>
                <van-divider 
                  :style="{ borderWidth: '5px',height: '0px',
                    borderColor: '#eeeeee',margin: '0' }"/>
                <!-- 遍历结构信息数据 -->
                <productList v-for="(list,index) in categoryItemList" :key="index" :title="list.category.name" :productList="list.itemList">
                  <template #lineBetween>
                    <van-divider 
                    :style="{ borderWidth: '5px',height: '0px',
                      borderColor: '#eeeeee',margin: '0' }"/>
                  </template>
                </productList>
                
              </div>
          </van-tab>
         
        </van-tabs>
      </div>

    </div>
    
  </div>
</template>

<script>

import indexRecommend from './components/indexRecommend'
// 三级分类
import { reqCateList, reqProductList } from '@/axios'
import { mapState } from 'vuex'

export default {
  name: 'indexName',
  components: {
    indexRecommend
  },
  computed:{
    ...mapState({ user: state=>state.user.Personalinfo })
  },
  data(){
    return {
      isLoadingCategoryInfo: true,
      active: -1, // 切换分类标志
      isNav: true, // 展示下拉
      height: 0, // 展示框高度
      categoryL1List: [], // 存储一级分类
      cateGoryBannerList:[], // 点击分类后的 轮播图列表
      categoryItemList: [], // 商品列表数据块儿
    }
  },
  methods: {

    changeactive(id){
      this.active = id
      // 关闭遮罩层
      this.toggleNav()
    },
    // 切换按钮相关方法
    toggleNav(){
      // 这里的意思是添加动画效果
      this.isNav = !this.isNav
      if(!this.isNav){
        this.$refs.content.style.height = '5rem'
        this.$refs.content.style.top = '1.5rem'
        this.$refs.icon.style.transform = 'rotate(0deg)'
      }else {
        this.$refs.content.style.height = '0rem'
        this.$refs.icon.style.transform = 'rotate(180deg)'
        setTimeout(()=>{
          this.$refs.content.style.top = '-99rem'
        },200)
      }
    },
    // 获取一级分类数据
    async getCategoryList(){
      const res = await reqCateList()
      this.categoryL1List = res.data.categoryL1List.slice(1)
    },
    // 根据分类id获取商品信息数据
    async getProductList(categoryL1Id){
      // 骨架屏
      this.isLoadingCategoryInfo = true
      // console.log('开始发送请求获取数据',categoryL1Id)
      const res = await reqProductList(categoryL1Id)
      this.isLoadingCategoryInfo = false

      // console.log(res)
      // 发送请求之前 开始骨架屏
      // console.log(res.data.currentCategory.bannerList)
      // 轮播图数据
      this.cateGoryBannerList = res.data.currentCategory.bannerList
      // 商品数据
      this.categoryItemList = res.data.categoryItemList
      // console.log(this.categoryItemList)
    }
  },
  watch: {
    // 监视数据变化，发送请求获取数据
    active(val){
      if(val === -1){
        return
      }
      // 发送请求之前清空数据
      this.cateGoryBannerList = []
      // console.log('数据发生变化',val)
      // 在这里发送请求获取数据
      this.getProductList(val)
    }
  },
  mounted() {
    this.getCategoryList()
  }
}
</script>

<style lang="less">
  .van-sticky{
   position: fixed;
   top: 1.2rem;
   z-index: 99;
  }
  // 设置遮罩层层级
</style>

<style lang="less" scoped>
.indexConainer{
  // 分类轮播图样式
  .category-swipe{
    height: 160px;
  }

  // 空标签占位
  .empty{
    height: 2.42rem;
  }
  color: #333;
  // 切换状态分类
  .toggle-wrap{
    position: fixed;
    top: 1.5rem;
    right: 0;
    // width: 100%;
    // background-color: red;
    z-index: 101;
    // 三角的图标区域
    width: 100px;
    // background: #dd1a21;
    width: 60px;
    height: 30px;
    // 阴影样式
    .linear{
      width: 30px;
      height: 30px;
      float: left;
      background-image: linear-gradient(90deg,hsla(0,0%,100%,0) 0,#fff);
      // background-image: -webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(#fff));
    }
    .icon{
      width: 30px;
      height: 30px;
      float: right;
      background: #fff;
      .van-icon{
        // background: #fff;
        transition: transform 0.5s;
        transform: rotate(180deg);
        // margin-left: 0.2rem;
        // margin-right: 15px;
      }
    }
    
  }
  // 导航内容区域
  .content-wrap{
    transition: height 0.2s;
    width: 100%;
    background: #fff;
    height: 0rem;
    position: fixed;
    top: 1.5rem;
    right: 0;
    width: 100%;
    z-index: 100;
    overflow: hidden;
    .title{
      margin-left: 0.3rem;
      font-size: 0.4rem;
    }
    
    // 标签样式
    .tag-wrap{
      padding: 0.3rem;
      padding-right: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      height: 3.5rem;
      .van-tag{
        height: 0.7rem;
        width: 1.83rem;
        line-height: 0.7rem;
        text-align: center;
        display: block;
        margin-right: 0.383rem;
        
      }
      .mark{
        height: 100%;
      }
    }
  }
  // header 头部样式
  .header{
    // 头部固定的样式
    
    font-size: 0.45rem;
    // padding: 0.2rem 0rem;
    .top-search-wrap{
      background: #fff;
      position: fixed;
      top: 0;
      z-index: 99;
      display: flex;
      align-items: center;
      padding: 0.2rem 0.3rem;
      // height: 1rem;
      width: 94%;
      // logo样式
      .logo{
        margin-right: 0.2rem;
        // img 标签区域
        img{
          width: 69px;
          height: 20px;
          margin-top: 8px;
        }
      }
      .search-btn-wrap{
        flex: 1;
      }
      // 搜索按钮区域
      .search-btn{
        flex: 1;
        font-size: 0.38rem;
        padding-left: 0.4rem;
        line-height: 0.6rem;
        height: 0.8rem;
        line-height: 0.8rem;
        border-radius: 0.1rem;
        background-color: #ededed;
        color: #666;
        // 图标样式
        .van-icon{
          font-size: 0.48rem;
          padding-top: 0.2rem;
        }
        // 文字样式
        span{
          position: relative;
          top: -3px;
        }
      }
      // 登录按钮
      .login-btn{
        margin-left: 0.2rem;
        font-size: 0.2rem;
        border: 1px solid #dd1a21;
        border-radius: 0.1rem;
        padding: 0.02rem 0.12rem;
        height: 0.4rem;
        padding-top: 0.03rem;
        color: #dd1a21;
        
        
      }
    }
  }
}
</style>